import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './Loader.less';

class Loader extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      startTime: Date.now(),
      loading: true,
    };
    const { spinning } = props;
    // if (spinning === false) {
    //   this.endLoadingDelay();
    // }
  }

  componentWillReceiveProps (props) {
    const { spinning } = props;
    this.setState({
      loading: spinning,
    });
  }

  // endLoadingDelay = () => {
  //   const x = Date.now() - this.state.startTime;
  //   if (x < 1000) {
  //     setTimeout(() => {
  //       this.setState({
  //         loading: false,
  //       });
  //     }, 1500 - x);
  //   }
  // };

  render () {
    const { fullScreen } = this.props;

    return (<div className={classNames(styles.loader, {
      [styles.hidden]: !this.state.loading,
      [styles.fullScreen]: fullScreen,
    })}
    >
      <div className={styles.warpper}>
        <div className={styles.inner} />
        <div className={styles.text} >LOADING</div>
      </div>
    </div>);
  }
}

// const Loader = ({ spinning, fullScreen }) => {
//   return (<div className={classNames(styles.loader, {
//     [styles.hidden]: !spinning,
//     [styles.fullScreen]: fullScreen,
//   })}
//   >
//     <div className={styles.warpper}>
//       <div className={styles.inner} />
//       <div className={styles.text} >LOADING</div>
//     </div>
//   </div>);
// };

Loader.propTypes = {
  spinning: PropTypes.bool,
  fullScreen: PropTypes.bool,
};

export default Loader;
